<template>
    <div class="page">
        <div class="page-content">
            <x-calendar v-if="loanDay&&repayDay" :loanDay="loanDay" :repayDay="repayDay"></x-calendar>
    
            <div class="info" v-if="order">
                <p>借款日期 {{order.orderDate}}</p>
                <p class="repayDistance">
                    {{order.surplusDays|surplusDaysFilt}}
                    <template v-if="order.surplusDays!=0">
                        <span>{{order.surplusDays|abs}}</span>
                        天
                    </template>
                </p>
                <p>还款日期 {{order.repayDate}}</p>
                <h3 class="repayBox">
                    <p class="repayMoney">应还款金额
                        <span>{{order.repayAmt}}</span>元</p>
                    <p class="repayLine"></p>
                    <p class="repayMoney">未还款金额
                        <span>{{order.surplusRepayAmt}}</span>元</p>
                    
                </h3>
                <md-button class="button button-balanced button-block" @click.native="repay">
                    我要还款
                </md-button>
            </div>
    
        </div>
    </div>
</template>
<script src="./Info.js"></script>
<style lang="scss" scoped src="./Info.scss"></style>